<template>
  <div>
    <div class="top" v-show="sticky">
      电影
      <span @click="gocity()"
        >{{ city }}<i class="iconfont icon-xiajiantou"></i
      ></span>
    </div>
    <Header :class="{ sticky }" v-show="$store.state.detailHeader"></Header>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  data() {
    return {
      sticky: false,
      city: '北京'
    }
  },
  methods: {
    gocity() {
      // 跳转到city
      this.$router.push('/city')
    }
  },
  components: {
    Header
  },
  mounted() {
    // 添加滚动条事件
    window.addEventListener('scroll', () => {
      // 获取滚动过的距离
      const t = document.documentElement.scrollTop || document.body.scrollTop
      // 判断当滚动条大于220的时候，让top出现
      if (t >= 220) {
        this.sticky = true
      } else {
        this.sticky = false
      }
    })
  },
  created() {
    this.$store.commit('xian')
    if (this.$store.state.CityName) {
      // console.log(this.$store.state.CityName)
      this.city = this.$store.state.CityName
    }
  }
}
</script>

<style scoped lang='sass'>
.sticky
  position: fixed
  left: 0
  width: 100%
  top: 44px
  z-index: 2

.top
  width: 100%
  height: 44px
  font-size: 17px
  position: fixed
  top: 0
  left: 0
  text-align: center
  line-height: 44px
  z-index: 2
  background-color: #fff
  color: #191a1b
  span
    font-size: 12px
    position: absolute
    left: 20px
    top: 0
    i
      font-size: 10px
</style>
